<!--
 * @Date: 2020-12-28 15:22:53
 * @LastEditTime: 2020-12-31 15:33:35
 * @FilePath: /show/src/views/ourTeam/index.vue
 * @Author: twy
 * @LastEditors: twy
-->
<template>
  <div id="page2">
    <div class="title">
      our Team
    </div>
    <div class="content">
      <div v-for="item in ourTeam" :key="item.key" class="inner-item">
        <div class="left">
          <img style="width: 80px;height:80px" :src="item.image" alt="" >
        </div>
        <div class="right">
          {{ item.desc }}
        </div>
      </div>
      <img style="width: 100%;height:300px" src="/logo.png" alt="">
      <p>
        积分我佛金额为if姐威武VN我VN我看部门我可没
      </p>
    </div>
  </div>  
</template>

<script>
export default {
  name: 'ourTeam',
  data() {
    return {
      ourTeam: [
        {
          image: './logo.png',
          desc: '一段描述class="inner-item"，class="inner-item"',
          key: 'n1'
        },{
          image: './logo.png',
          desc: '一段描述',
          key: 'n2'
        },{
          image: './logo.png',
          desc: '一段描述',
          key: 'n3'
        }
      ]
    }
  }
}
</script>

<style scoped>
.title {
  height: 400px;
  width: 100%;
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #1aa7ea;
}
.content {
  margin: 0px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
  width: 70%;
  flex-direction: column;
}
.inner-item {
  display: flex;
  height: 200px;
  width: 100%;
  margin: 20px 10px;
  align-items: center;
}
.left {
  flex:1
}
.right {
  flex: 5;
  text-align: left;
  font-size: 24px;
}
</style>